<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>淘宝搜索页</title>
    <style>
        .my-layui-body{
            position:absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 998;
            width: auto;
            overflow: hidden;
            overflow-y: auto;
            box-sizing: border-box;
        }
        .my-layui-form-label{
            position: relative;
            float: left;
            display: block;
            padding: 9px 15px;
            width: 80px;
            font-weight: 400;
            line-height: 20px;
            text-align: center;
        }
        .my-attention-div{
            margin: 10px;
            text-align: left;
        }
        .getAttention{
            width: 100%;
            text-align: center;
            color: #ff3333;
            font-size: 14px;
            float: left;
        }
        .my-btn-div{
            height: 60px;
            margin-top: 15px;
            padding: 0 20px;
            text-align: center;
        }
        .my-btn{

        }
    </style>
    <#include "../../resource.ftl"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <div class="my-layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 0px;">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>热门词汇<legend>
            </fieldset>
            <blockquote class="layui-elem-quote">
                <label class="my-layui-form-label">选择分类</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" id="hotWordKeyWordInput" placeholder="请输入行业阿里指数id" autocomplete="off" class="layui-input">
                </div>

                <div class="my-btn-div">
                    <a href="javascript:void(0)" onclick="hotWord()" class="layui-btn layui-btn-danger my-btn">热门词汇</a>
                    <div class="my-attention-div">
                        <span class="getAttention">注意：获取指定时间内的淘宝热搜词汇</span>
                    </div>
                </div>
            </blockquote>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>关键词联想<legend>
            </fieldset>
            <blockquote class="layui-elem-quote">
                <label class="my-layui-form-label">关键词</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="wordGuessKeyWordInput" required  lay-verify="required" placeholder="请输入关键词" autocomplete="off" class="layui-input">
                </div>
                <div class="my-btn-div">
                    <a href="javascript:void(0)" onclick="wordGuess()" class="layui-btn layui-btn-lg">关键词联想</a>
                    <div class="my-attention-div">
                        <span class="getAttention">注意：根据关键词获取联想词汇</span>
                    </div>
                </div>
                <div style="background-color: #F2F2F2;">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">联想词汇结果展示</div>
                                <div class="layui-card-body" id="wordGuess" style="overflow: hidden">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </blockquote>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>爆款链接<legend>
            </fieldset>
            <blockquote class="layui-elem-quote">
                <label class="my-layui-form-label">关键词</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="searchUrlKeyWordInput" required  lay-verify="required" placeholder="请输入关键词" autocomplete="off" class="layui-input">
                </div>
                <div class="my-btn-div">
                    <a href="javascript:void(0)" onclick="searchUrl()" class="layui-btn layui-btn-lg">获取链接</a>
                    <div class="my-attention-div">
                        <span class="getAttention">注意：根据关键词获取淘宝链接，已过滤品牌和非安全链接</span>
                    </div>
                </div>
                <div style="background-color: #F2F2F2;">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">搜索链接结果展示</div>
                                <div class="layui-card-body" id="" style="overflow: hidden">
                                    <table class="layui-hide" id="test" lay-filter="test"></table>

                                    <script type="text/html" id="toolbarDemo">
                                        <div class="layui-btn-container">
                                            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                                            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                                            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                                        </div>
                                    </script>

                                    <script type="text/html" id="barDemo">
                                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                                    </script>


                                    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
                                    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

                                    <script>
                                        layui.use('table', function(){
                                            var table = layui.table;

                                            table.render({
                                                elem: '#test'

                                                ,where: {
                                                    keyWord : $("#searchUrlKeyWordInput").val()
                                                  , pageSize : '50'
                                                }
                                                ,request:{
                                                    limitName:'pageSize'
                                                }
                                                ,method:'post'
                                                ,url:'/tb/search/searchItem'
                                                ,toolbar: '#toolbarDemo'
                                                ,title: '搜索链接结果数据表'
                                                ,cols: [[
                                                    {type: 'checkbox', fixed: 'left'}
                                                    ,{field:'imgUrl', title:'商品展示', minWidth:250, fixed: 'left', unresize: true,templet:function(res){
                                                    return '<img style="width: 50px;height: 50px;" src='+res.imgUrl+'>'
                                                    }}
                                                    ,{field:'name', title:'商品名称', minWidth:250, fixed: 'left', unresize: true}
                                                    ,{field:'price', title:'商品单价', minWidth:200, sort: true}
                                                    ,{field:'storeName', title:'商铺名称', minWidth:250
                                                        // , edit: 'text'
                                                        // , templet: function(res){
                                                        //     return '<em>'+ res.email +'</em>'
                                                        // }
                                                      }
                                                    ,{field:'url', title:'商品链接', minWidth:200, templet:function(res){
                                                        return '<a href='+res.url+'> 点击进入 </a>'
                                                      }}
                                                    // ,{field:'city', title:'城市', width:100}
                                                    // ,{field:'sign', title:'签名'}
                                                    // ,{field:'experience', title:'积分', width:80, sort: true}
                                                    // ,{field:'ip', title:'IP', width:120}
                                                    // ,{field:'logins', title:'登入次数', width:100, sort: true}
                                                    // ,{field:'joinTime', title:'加入时间', width:120}
                                                    // ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                                                ]]
                                                ,page: true
                                            });

                                            //头工具栏事件
                                            table.on('toolbar(test)', function(obj){
                                                var checkStatus = table.checkStatus(obj.config.id);
                                                switch(obj.event){
                                                    case 'getCheckData':
                                                        var data = checkStatus.data;
                                                        layer.alert(JSON.stringify(data));
                                                        break;
                                                    case 'getCheckLength':
                                                        var data = checkStatus.data;
                                                        layer.msg('选中了：'+ data.length + ' 个');
                                                        break;
                                                    case 'isAll':
                                                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                                                        break;
                                                };
                                            });

                                            //监听行工具事件
                                            table.on('tool(test)', function(obj){
                                                var data = obj.data;
                                                //console.log(obj)
                                                if(obj.event === 'del'){
                                                    layer.confirm('真的删除行么', function(index){
                                                        obj.del();
                                                        layer.close(index);
                                                    });
                                                } else if(obj.event === 'edit'){
                                                    layer.prompt({
                                                        formType: 2
                                                        ,value: data.email
                                                    }, function(value, index){
                                                        obj.update({
                                                            email: value
                                                        });
                                                        layer.close(index);
                                                    });
                                                }
                                            });
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </blockquote>







            <#--<blockquote class="layui-elem-quote">-->
                <#--<h2>联想词汇结果展示</h2>-->
                <#--<div id="wordGuess">-->


                <#--</div>-->
            <#--</blockquote>-->
            <blockquote class="layui-elem-quote">
                <h2>热门词汇结果展示</h2>
                <div id="hotWord">


                </div>
            </blockquote>
            <#--<blockquote class="layui-elem-quote">-->
                <#--<h2>搜索链接结果展示</h2>-->
                <#--<div id="searchUrl">-->


                <#--</div>-->
            <#--</blockquote>-->
        </div>
    </div>
</div>
<script>
    function hotWord() {
        var index = layer.load();
        $.ajax({
            url: '/tb/search/hotWord',
            type: 'POST',
            data: {
                keyWord : $("#hotWordKeyWordInput").val(),
                pageSize : '50'
            },
            dataType: 'json',
            success: function(res) {
                layer.close(index);
                $("#hotWord").empty();
                console.log("data:" + res);
                var str = "";
                if(res.code == 0) { //响应成功
                    var data = res.data;
                    for(var i in data){
                        str += data[i];
                        str += "</br>";
                    }
                    $("#hotWord").append(str);
                } else {
                    alert(res.message);
                    console.log(res.message);
                    layer.close(index);
                }
            }
        });
    }
    function wordGuess() {
        $.ajax({
            url: '/tb/search/associativeWord',
            type: 'POST',
            data: {
                keyWord: $("#wordGuessKeyWordInput").val()
            },
            dataType: 'json',
            success: function(res) {
                $("#wordGuess").empty();
                console.log("data:" + res);
                var str = "";
                if(res.code == 0) { //响应成功
                    var data = res.data;
                    for(var i in data){
                        str += "<div class='layui-col-md3'><div class='layui-card'><div class='layui-card-body' style='height:70px'>"
                        str += data[i];
                        // str += "</br>";
                        str += "</div></div></div>";
                    }
                    $("#wordGuess").append(str);
                } else {
                    alert(res.message);
                    console.log(res.message);
                }
            }
        });
    }
    // function searchUrl() {
    //     var index = layer.load();
    //     $.ajax({
    //         url: '/tb/search/searchItem',
    //         type: 'POST',
    //         data: {
    //             keyWord : $("#searchUrlKeyWordInput").val(),
    //             pageSize : '50'
    //         },
    //         dataType: 'json',
    //         success: function(res) {
    //             layer.close(index);
    //             $("#searchUrl").empty();
    //             console.log("data:" + res);
    //             var str = "";
    //             if(res.code == 0) { //响应成功
    //                 var data = res.data;
    //                 for(var i in data){
    //                     str += "<div>";
    //                     str += "<div class='layui-col-md3'>"+data[i].name+"</div>";
    //                     str += "<div class='layui-col-md3'>"+data[i].price+"</div>";
    //                     str += "<div class='layui-col-md3'>"+data[i].storeName+"</div>";
    //                     str += "<div class='layui-col-md3'>"+data[i].url+"</div>";
    //                     str += "</div>";
    //                     str += "</br>";
    //                 }
    //                 $("#searchUrl").append(str);
    //             } else {
    //                 alert(res.message);
    //                 console.log(res.message);
    //             }
    //         }
    //     });
    // }
</script>
</body>
</html>
